

<template>
  <div>
    <van-form @submit="onSubmit">
      <van-row>
        <van-col span="12">
          <select-area @selectedArea="selectedArea" />
        </van-col>
        <van-col span="12">
          <select-type @selectedType="selectedType" objectName="wh_checkin_apply" fieldName="conn_type"/>
        </van-col>
      </van-row>  
      
      <van-field
        v-model="house.hope_addr" type="text" label="希望地址" 
        :rules="[{ required: true, message: '请填写地址' }]"/>
      <van-field
        v-model="house.checkin_num" type="digit" label="入住人数" 
        :rules="[{ required: true, message: '请填写人数' }]"/>

      <van-cell title="选择日期区间" :value="dates" @click="showCalendar = true" />
      <van-calendar v-model="showCalendar" type="range" @confirm="onConfirm"/>

      <van-field
        v-model="house.conn_person"  label="联系人" 
        :rules="[{ required: true, message: '请填写联系人' }]"/>
      <van-field
        v-model="house.conn_phone" type="digit" label="联系电话" 
        :rules="[{ required: true, message: '请填写电话' }]"/>
      <van-field
        v-model="house.checkin_reson" label="入住原因" 
        :rules="[{ required: true, message: '请填写微信' }]"/>
      <van-field
        v-model="house.remark"  label="其他说明" 
        :rules="[{ required: false, message: '请填写其他说明' }]"/>
      <van-button round block type="info" native-type="submit">提交</van-button>
    </van-form>
  </div>
</template>

<script>
  import { insert } from "@/api/common";
  import SelectArea from "../components/SelectArea";
  import SelectType from "../components/SelectType";
  import { Toast } from 'vant';

  export default {
    name: "freestay",
    components: {
      SelectArea,
      SelectType,
    },
    data() {
      return {
        items: [],
        areaValue: 0,
        typeValue: 0,
        showCalendar: false,
        dates: '',
        house: {hope_addr:'',
          date_begin:'',date_end:'',
          checkin_num:'',checkin_area:'',checkin_reson:'',remark:'',
          conn_person:'',conn_phone:'',conn_type:''},
      }
    },
    mounted() {
    },
      methods: {    
        formatDate(date) {
          return date.getFullYear()+'-'+(date.getMonth()+1) +"-"+date.getDate();
        },
        onConfirm(date) {
        const [start, end] = date;
        this.showCalendar = false;
        this.dates = this.formatDate(start)+' - '+this.formatDate(end);
      },
      onSubmit(values) {
        if(this.areaValue==0||this.typeValue==0) {
          Toast('请选择区域和类型');
          return;
        }
        this.house.checkin_area = this.areaValue;
        this.house.conn_type = this.typeValue;
        var ar = this.dates.split(' - ');
        this.house.date_begin = ar[0];
        this.house.date_end = ar[1];
        var params={
          'Wh_checkin_apply': this.house,
          'tag': 'Wh_checkin_apply'
        }
        let that = this;
        insert(params)
          .then((res) => {
            if(res.data.msg=='success'){
              Toast.success('保存申请成功');
              this.$emit('onAdded','');
            }
            else
              Toast.fail('保存申请失败');
          })
          .catch(function (error){
              Toast.fail('调用服务器，保存申请失败');
          });
      },
      selectedArea(value) {
        this.areaValue = value;
      },
      selectedType(value) {
        this.typeValue = value;
      },
    }
  }
</script>

<style scoped>

</style>
  